<script>
import { h } from 'vue' // 引入 h 函数来创建 VNode

export default {
  props: {
    msg: String
  },
  setup(props) {
    // 定义一个自定义渲染函数
    const renderContent = () => {
      return h('div', [
        h('h1', '通过vue的h函数自定义渲染:' + props.msg),
        h('p', 'This content is rendered using a render function in setup()'),
        h('button', { onClick: () => alert('Button clicked!') }, '点我')
      ])
    }

    // 返回渲染函数作为自定义渲染的内容
    return {
      renderContent
    }
  },

  // 自定义渲染函数
  render() {
    // 调用 setup() 中返回的渲染函数
    return this.renderContent()
  }
}
</script>
  
<style></style>
<!-- <style scoped>
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
.isShowHide2 {
  height: 100px;
  width: 100px;
  background-color: rgb(94, 104, 223);
}
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style> -->